<template>
	<view style="width: 100%;border-bottom: 0 none; position: fixed; z-index:2" >
		<!--tab切换-->
		<view style="background: #ffffff;position: relative;">
			<view class="h-tab vp-flex">
				<view :class="'h-tab-item vp-flex_1 ' + (filt == ''? 'on':'')" data-filt="" @tap="onFilterChange">全部</view>
				<view :class="'h-tab-item vp-flex_1 ' + (filt == '1'?'on':'') " data-filt = "1" @tap="onFilterChange">待支付</view>
				<view :class="'h-tab-item vp-flex_1 ' + (filt == '2'?'on':'') " data-filt = "2" @tap="onFilterChange">待服务</view>
				<view :class="'h-tab-item vp-flex_1 ' + (filt == '3'?'on':'') " data-filt = "3" @tap="onFilterChange">已完成</view>
				<view :class="'h-tab-item vp-flex_1 ' + (filt == '4'?'on':'') " data-filt = "4" @tap="onFilterChange">已取消</view>
				
			</view>
		</view>
		<!--加个空白高度-->
		<view style="height: 100rpx"></view>
		<!--列表区-->
		<view v-if="list != null">
			<!--当列表数据为空-->
			<view v-if="list != null && list.length == 0" style="padding: 40rpx; text-align: center;">
				<image src="/static/resource/images/empty.png" mode="widthFix" style="width: 200rpx;" ></image>
				<view class="f5"> 没有相关内容</view>
			</view>
			
			<!--当列表数据不为空时-->
			<view v-else class="od-list">
				<block v-for="(item,index) in list" :key="index">
					<view  class="od-item" @tap="toOrder" :data-id="item.out_trade_no">
						<view class="weui-cell weui-cell_access">
							<view class="weui-cell__hd">
								<view>
									<image :src="item.service_logo_image_url" mode="widthFix" class="od-logo" style="width: 100rpx; height: 100rpx; margin-right: 20rpx;"/>
								</view>
							</view>
							<view class="weui-cell__bd">
								<view>
									<text style="font-weight: bold">{{ item.service_name }}</text>
								</view>
								<view class="od-info">
									<block v-if="item.service_stype <= 20">
										<view>
											<text>{{ item.hospital_name }}（{{ item.area_name }}）</text>
										</view>
										<view>
											预约时间：
											<formater :timestamp="item.starttime" format="MM-dd hh:mm"></formater>
										</view>
										<view>
											就诊人员：
											<text>{{ item.client_name }}</text>
										</view>
									</block>
									<block v-if="item.service_stype > 20 && item.service_stype < 100">
										<view>
											<text>{{ item.hospital_name }}（{{ item.area_name }}）</text>
										</view>
										<view>
											处理时间：
											<formater :timestamp="item.starttime" format="MM-dd hh:mm"></formater>
										</view>
									</block>
									<block v-if="item.service_stype > 100">
										<view>
											服务时间：
											<formater :timestamp="item.starttime" format="MM-dd hh:mm"></formater>
										</view>
										<view>
											服务对象：
											<text>{{ item.client_name }}</text>
										</view>
										<!-- <view>服务地址：<text>{{item.address.address}}</text> </view> -->
									</block>
								</view>
</view>
             <view class="weui-cell__ft">
	   <!-- 待付款 -->
								<block v-if="item.trade_state == '待支付'">
									<view style="color: #ffa200"><text>待支付</text></view>
									<view style="color: #ffa200">
										<counter style="font-size: 24rpx" :second="item._exp_time"
											@counterOver="onCounterOver" />
									</view>
								</block>
								<!-- 进行中 -->
								<block v-if="item.trade_state == '待服务'">
									<view style="color: #1da6fd"><text>待服务</text></view>
								</block>
								<!-- 已完成 -->
								<block v-if="item.trade_state == '已完成'">
									<view style="color: #21c521"><text>已完成</text></view>
								</block>
								<!-- 已取消 -->
								<block v-if="item.trade_state == '已取消'">
									<view style="color: #999999"><text>已取消</text></view>
								</block>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {reactive, ref,toRaw } from 'vue'
	import {onShow} from '@dcloudio/uni-app'
	const app = getApp()
	const filt = ref("")
	const list = ref([])
	onShow( () => {
		//从全局获取，在用户跳转过来时就可以到对应的tab下
		filt.value = app.globalData.orders_filt
		loadList()
	})
	
	const onFilterChange = (e) => {
		//{filt: curfilt } 这是es6 取别名的写法
		const {filt: curfilt } = e.currentTarget.dataset
		if(curfilt === filt.value) return
		//将点击的值赋值
		filt.value = curfilt
		//赋值后渲染对应的订单列表
		loadList()
		
	}
	
	
	//订单列表
	const loadList = () => {
		//调用订单列表的数据
		app.globalData.utils.request({
			url:"/order/list",
			method:"GET",
			data:{
			  state: filt.value
			},
			header:{
				token: uni.getStorageSync('token')
			},
			success: (res) => {
				list.value = res.data
			},
			fail: (res) => {
				uni.showToast({
					title: res.msg,
					icon:"none",
					duration:1000
				})
			}
			
		})
	}
	
	//跳转到详情页面
	const toOrder = (e) => {
		uni.navigateTo({
			url:"/pages/order/order?oid=" + e.currentTarget.dataset.id
		})
	}
	
	
	//倒计时借宿后回调，重新渲染列表页面
	const onCounterOver = () => {
		loadList()
	}
	
	

	
</script>

<style>
 @import './index.css'
</style>
